/*************************************************
 *  Page content
 **************************************************/

.article-container {
  max-width: 760px;
  padding: 0 20px;
  margin: 0 auto;
}

.page-subtitle {
  font-size: 1.15rem;
  color: rgba(0, 0, 0, 0.54);
  margin-bottom: 1rem;
}

.dark .page-subtitle {
  color: rgba(255, 255, 255, 0.54);
}

.article-header {
  position: relative; /* Required for caption positioning */
  clear: both;
}

.article-banner {
  width: 100%;
  height: 260px;
  object-fit: cover;

  @include media-breakpoint-up(lg) {
    height: 310px; /* Increased height on desktop */
  }
}

.featured-image-wrapper {
  position: relative;
  padding-left: 0; /* Override container padding. */
  padding-right: 0; /* Override container padding. */
}

.featured-image {
  position: relative;
  width: 100%;
  display: block;
  margin: 0 auto;
}

.article-header-caption {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0 auto;
  padding: 2px 5px;
  color: #fff;
  font-size: 0.7em;
  background: #000;
  text-align: right;
  z-index: 5;
  opacity: 0.65;
  border-radius: 5px 0 0;
}
@media (min-width: 64em) {
  .article-header-caption {
    padding: 5px 10px;
  }
}

.article-header-caption a {
  color: #fff;
  text-decoration: none;
}

.article-title {
  font-size: 1.75rem;
}

.article-title a {
  color: #151515;
  transition: color 0.6s ease;
}

.dark .text-muted {
  color: rgba(255, 255, 255, 0.54) !important;
}

.article-style {
  // Any unresponsive embeds, e.g. Plotly, should be wrapped to handle on a case-by-case basis.
  // If any unresponsive embeds still remain in the article, prevent article overflow and DIV scrolling.
  // Note that lazy-loaded images, e.g. Gallery, may cause scrollable Y-overflow if only X-overflow is hidden pre-load.
  overflow: hidden;

  // Word wrap text content.
  @include word-wrap;

  // Underline links if they are a similar color to the body text.
  a {
    text-decoration: $sta-link-decoration;
  }

  img,
  video {
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding: 0;
  }

  td img,
  td video {
    margin-top: 0;
    margin-bottom: 0;
  }

  figure {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  figure img {
    margin-top: 0;
    margin-bottom: 0;
  }
}

.dark .article-style {
  // Underline links if they are a similar color to the body text.
  a {
    text-decoration: $sta-dark-link-decoration;
  }
}

.article-metadata {
  margin-bottom: 15px;
  overflow: hidden;
  font-size: 14px;
  letter-spacing: 0.03em;
  color: rgba(0, 0, 0, 0.54);

  a {
    color: rgba(0, 0, 0, 0.54);
  }

  a:hover {
    color: $sta-primary;
  }

  .author-notes {
    cursor: help;
    padding-left: 3px;
  }

  .author-highlighted {
    font-weight: bold;
  }
}

/* For article page only, not lists. */
article .article-metadata {
  margin-bottom: 20px;
}

.dark .article-metadata {
  color: rgba(255, 255, 255, 0.54);
}

.stream-meta.article-metadata {
  margin-bottom: 5px;
}

.article-categories {
  white-space: nowrap; /* Keep category icon on same line as category links, otherwise context lost. */
}

.middot-divider {
  padding-right: 0.45em;
  padding-left: 0.45em;
  font-size: 15px;
}

.middot-divider::after {
  content: '\00B7';
}

caption {
  // Override Bootstrap alignment
  text-align: center;
}

// Note default light caption inherited from Bootstrap
.dark caption {
  color: rgba(255, 255, 255, 0.8);
}

/*************************************************
 *  Content widgets
 **************************************************/

.content-widget-hr {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.dark .content-widget-hr {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/*************************************************
 *  Tags
 **************************************************/

.article-tags {
  margin-top: 1.2rem;
}

/*************************************************
 *  Comments
 **************************************************/

#comments {
  padding-top: 1rem;
}

/*************************************************
 *  Related content
 **************************************************/

.article-widget {
  padding-top: 1.2rem; /* Match .content-widget-hr */
}

.article-widget h3 {
  margin-top: 0;
}

/*************************************************
 *  Dark theme
 **************************************************/

.dark .article-metadata a {
  color: rgba(255, 255, 255, 0.54);
}
